import React, { useState, useEffect } from 'react';
import style from './Form.module.css';
import { Form, Input, Button } from 'antd';
import { addSubscribe, changeSubscribe } from './api';
const { box, Buttons } = style;

export default function SubscribeForm(props) {
  // console.log(props);

  // console.log(props.FormValueFa, 'props.FormValueFa');

  const [FormValueSun, setFormValueSun] = useState(props.FormValueFa || {});
  const [flag, setFlag] = useState(true);
  const handleChange = (e) => {
    // console.log(FormValueSun, 'FormValueSun');
    // console.log(e[0].name[0], 'e');

    switch (e[0].name[0]) {
      case 'title':
        setFormValueSun({
          id: FormValueSun.id,
          title: e[0].value,
          introduce: FormValueSun.introduce,
          imgUrl: FormValueSun.imgUrl,
        });
        break;
      case 'introduce':
        setFormValueSun({
          id: FormValueSun.id,
          title: FormValueSun.title,
          introduce: e[0].value,
          imgUrl: FormValueSun.imgUrl,
        });
        break;
      case 'imgUrl':
        setFormValueSun({
          id: FormValueSun.id,
          title: FormValueSun.title,
          introduce: FormValueSun.introduce,
          imgUrl: e[0].value,
        });
        break;
    }
  };
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const [form] = Form.useForm();

  const onFinish = (value) => {
    // console.log(value);
    if (props.FormValueFa) {
      changeSubscribe(FormValueSun.id, {
        title: FormValueSun.title,
        introduce: FormValueSun.introduce,
        imgUrl: FormValueSun.imgUrl,
      }).then((res) => {
        console.log(res, '修改项目预约');
        form.resetFields();
        props.handleOk();
      });
    } else {
      addSubscribe({
        key: Date.now(),
        title: value.title,
        introduce: value.introduce,
        imgUrl: value.imgUrl,
      }).then((res) => {
        console.log(res, '添加项目预约');
        form.resetFields();
        props.handleOk();
      });
    }
  };

  const onReset = () => {
    setFlag(!flag);

    setFormValueSun({
      id: props.FormValueFa.id,
      title: props.FormValueFa.title,
      introduce: props.FormValueFa.introduce,
      imgUrl: props.FormValueFa.imgUrl,
    });

    // console.log(props.FormValueFa.title, 'props.FormValueFa.title');

    props.handleCancel();
  };

  useEffect(() => {
    // console.log(props.FormValueFa);
    if (props.action == '修改') {
      // console.log('点击修改按钮');
      form.setFieldsValue({
        title: props.FormValueFa.title,
        introduce: props.FormValueFa.introduce,
        imgUrl: props.FormValueFa.imgUrl,
      });
    }
    if (props.action == '添加') {
      // console.log('点击添加按钮');
      form.resetFields();
    }
  }, [props.FormValueFa, flag]);
  return (
    <div className={box}>
      {/* {console.log(FormValueSun, 'onReset')} */}
      <Form
        {...formItemLayout}
        form={form}
        name="register"
        onFinish={onFinish}
        scrollToFirstError
        onFieldsChange={handleChange}
      >
        <Form.Item
          name="title"
          label="项目名称"
          rules={[
            {
              required: true,
              message: '请输入项目名称',
            },
          ]}
        >
          <Input showCount maxLength={50} />
        </Form.Item>

        <Form.Item
          name="introduce"
          label="项目介绍"
          rules={[{ required: true, message: '请输入项目介绍' }]}
        >
          <Input.TextArea rows={10} />
        </Form.Item>
        <Form.Item
          name="imgUrl"
          label="图片地址"
          rules={[{ required: true, message: '请输入图片地址' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item className={Buttons}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
